<template>
    <div class="xjcategorybox">
        <div class="xjcategorytitle"><span>分类筛选</span></div>
        <div class="xjcategorycontent">
            <el-select v-model="category_id_title" clearable placeholder="请选择专栏分类" class="mt-10 ml-10" style="width: 300px">
                <el-option-group v-for="group in options" :key="group.id" :label="group.title">
                    <el-option v-for="item in group._child" :key="item.id" :label="item.title" :value="item.id+','+item.title"> </el-option>
                </el-option-group>
            </el-select>
            <el-button type="primary" size="small" class="ml-10" @click="setId">确定</el-button>
            <p class="mt-10 mb-10">
                <el-tag>您可以选择分类专栏,点击确定后保存才能生效</el-tag>
            </p>
        </div>
    </div>
</template>

<script>
import { classifyListData } from '../../api/index';
export default {
    data() {
        return {
            category_id_title: '',
            options: ''
        };
    },
    methods: {
        setId() {
            let arr=this.category_id_title.split(',');
            this.$parent.nowitem.categorydata.id = arr[0];
            this.$parent.nowitem.categorydata.name=arr[1];
            this.$message.success("分类设置成功");
        }
    },
    created() {
        classifyListData().then((res) => {
            this.options = res.data.list;
        });
    }
};
</script>


<style lang="scss">
//@import "@/assets/css/common.scss";
.xjcategorybox {
    width: 400px;
    display: flex;
    flex-direction: column;

    .xjcategorytitle {
        width: 100%;
        height: 30px;
        background-color: $danlv;
        border: 1px solid $qianlv;

        span {
            margin-left: 10px;
            font-size: 12px;
            line-height: 30px;
            color: $shenlv;
        }
    }

    .xjcategorycontent {
        width: 100%;
        background-color: white;
        border: 1px solid $qianlv;

        p {
            font-size: 12px;
            margin-left: 15px;
        }
    }
}
</style>
